<style type="text/css">
    ul#ind-tree ul li {
        list-style: disc;
    }
    ul#ind-tree ul {
        padding: 0px 1em;
    }
    .side-right {
        min-height: 500px;
    }
</style>
<ul id="ind-tree">
    <li class="ind-i<? echo $rootIndicator->id; ?>">
        <span class="name">
            <?php
            echo $rootIndicator->name;
            ?>
        </span>
        <span class="aksi">
            (
            <span class="a-append">
                <a href="javascript:void(0);" onClick="javascript:showAppendDialog(<?php echo $rootIndicator->id; ?>);">append</a>
                |
            </span>
            <span class="a-expand <?php echo ($rootIndicator->has_child ? "" : "hidden") ?>">
                <a href="javascript:void(0);" onClick="javascript:expandInd(<?php echo $rootIndicator->id; ?>);">expand</a>
            </span>
            )
        </span>
        <ul class="childs">
        </ul>
    </li>
</ul>
<div id="append-dialog" title="Append" style="display: none;">
    Name : <input class="a-name" type="text" />
    <br />
    Has Value? <input class="a-hasvalue" type="checkbox" />
    <br />
    Metric : <input class="a-metric" type="text" />
    <br />
    Description : <textarea class="a-desc"></textarea>
    <br />
    <button onClick="javascript:submitAppend();">Append</button>
    <input type="hidden" />
</div>

<div id="detail-dialog" title="Detail" style="display: none;">
    Name : <input class="a-name" type="text" />
    <br />
    Has Value? <input class="a-hasvalue" type="checkbox" />
    <br />
    Metric : <input class="a-metric" type="text" />
    <br />
    Description : <textarea class="a-desc"></textarea>
    <button onClick="javascript:submitUpdate();">Update</button>
    <input type="hidden" />
</div>

<script type="text/javascript">
                    jQuery(document).ready(function() {
                        $("#append-dialog").dialog({
                            modal: true,
                            autoOpen: false
                        });
                        $("#detail-dialog").dialog({
                            modal: true,
                            autoOpen: false
                        });
                    });

                    function showAppendDialog(id) {
                        $("#append-dialog input[type='hidden']").val(id);
                        $("#append-dialog .a-name").val("");
                        $("#append-dialog .a-hasvalue").prop("checked", false);
                        $("#append-dialog .a-metric").val("");
                        $("#append-dialog .a-desc").val("");
                        $("#append-dialog").dialog("open");
                    }

                    function showDetailDialog(id) {
                        $.ajax({
                            type: "POST",
                            url: "<?php echo site_url("usercp/getIndicatorJSON"); ?>/" + id,
                            data: {},
                            async: false,
                            beforeSend: function(xhr) {
                            },
                            success: function(result, status, xhr) {
                                var resObj = $.parseJSON(result);
                                $("#detail-dialog input[type='hidden']").val(resObj.id);
                                $("#detail-dialog .a-name").val(resObj.name);
                                $("#detail-dialog .a-hasvalue").prop("checked", (resObj.has_value === "1"));
                                $("#detail-dialog .a-metric").val(resObj.metric);
                                $("#detail-dialog .a-desc").val(resObj.desc);
                                $("#detail-dialog").dialog("open");
                            },
                            error: function(xhr, status, error) {
                            }
                        });
                    }

                    function submitAppend() {
                        // inquiry    
                        var data = {
                            parent_id: $("#append-dialog input[type='hidden']").val(),
                            name: $("#append-dialog .a-name").val(),
                            has_value: ($("#append-dialog .a-hasvalue").is(":checked") ? 1 : 0),
                            metric: $("#append-dialog .a-metric").val(),
                            desc: $("#append-dialog .a-desc").val()
                        };
                        // validation
                        var messages = [];
                        var validated = true;
                        var goFocus = true;
                        //..
                        if (!data.name) {
                            messages.push("Isi nama indikator");
                            validated = false;
                        }
                        if (data.has_value) {
                            if (!data.metric) {
                                messages.push("Isi metrik indikator");
                                validated = false;
                            }
                        } else {
                            data.metric = "-";
                        }

                        if (validated) {
                            // send
                            $.ajax({
                                type: "POST",
                                url: "<?php echo site_url("usercp/createIndicator"); ?>",
                                data: data,
                                async: false,
                                beforeSend: function(xhr) {
                                    $("#append-dialog button").prop("disabled", true);
                                },
                                success: function(result, status, xhr) {
                                    var resObj = $.parseJSON(result);
                                    expandInd(resObj.parent_id);
                                    appendHTML(resObj);

                                    $("#append-dialog button").prop("disabled", false);
                                    $("#append-dialog").dialog("close");
                                    $("#ind-tree").focus();
                                },
                                error: function(xhr, status, error) {
                                    $("#append-dialog button").prop("disabled", false);
                                }
                            });
                        } else {
                            var message = "Gagal menyimpan, silahkan : ";
                            message += "<ul>";
                            for (var i = 0; i < messages.length; i++) {
                                message += "<li>" + messages[i] + "</li>";
                            }
                            message += "</ul>";
                            alert(message, "Perhatian");
                            $(goFocus).focus();
                            return false;
                        }

                    }

                    function submitUpdate() {
                        // inquiry    
                        var data = {
                            id: $("#detail-dialog input[type='hidden']").val(),
                            name: $("#detail-dialog .a-name").val(),
                            has_value: ($("#detail-dialog .a-hasvalue").is(":checked") ? 1 : 0),
                            metric: $("#detail-dialog .a-metric").val(),
                            desc: $("#detail-dialog .a-desc").val()
                        };
                        // validation
                        var messages = [];
                        var validated = true;
                        var goFocus = true;
                        //..
                        if (!data.name) {
                            messages.push("Isi nama indikator");
                            validated = false;
                        }
                        if (data.has_value) {
                            if (!data.metric) {
                                messages.push("Isi metrik indikator");
                                validated = false;
                            }
                        } else {
                            data.metric = "-";
                        }

                        if (validated) {
                            // send
                            $.ajax({
                                type: "POST",
                                url: "<?php echo site_url("usercp/updateIndicator"); ?>",
                                data: data,
                                async: false,
                                beforeSend: function(xhr) {
                                    $("#detail-dialog button").prop("disabled", true);
                                },
                                success: function(result, status, xhr) {
                                    var resObj = $.parseJSON(result);

                                    if (resObj.reload) {
                                        window.location = "<?php site_url("usercp/data/indicator"); ?>";
                                    } else {
                                        $(".ind-i" + resObj.id + " .name").text("[" + resObj.id + "] " + resObj.name);
                                    }

                                    $("#detail-dialog button").prop("disabled", false);
                                    $("#detail-dialog").dialog("close");
                                    $("#ind-tree").focus();
                                },
                                error: function(xhr, status, error) {
                                    $("#detail-dialog button").prop("disabled", false);
                                }
                            });
                        } else {
                            var message = "Gagal menyimpan, silahkan : ";
                            message += "<ul>";
                            for (var i = 0; i < messages.length; i++) {
                                message += "<li>" + messages[i] + "</li>";
                            }
                            message += "</ul>";
                            alert(message, "Perhatian");
                            $(goFocus).focus();
                            return false;
                        }

                    }

                    function expandInd(id) {
                        $.ajax({
                            type: "POST",
                            url: "<?php echo site_url("usercp/getIndicatorChilds"); ?>/" + id,
                            async: false,
                            data: {},
                            beforeSend: function(xhr) {
                            },
                            success: function(result, status, xhr) {
                                var resArr = $.parseJSON(result);
                                $("li.ind-i" + id).find("span.a-expand").addClass("hidden");
                                for (var i = 0; i < resArr.length; i++) {
                                    var resObj = resArr[i];
                                    appendHTML(resObj);
                                }
                            },
                            error: function(xhr, status, error) {
                                $("#append-dialog button").prop("disabled", false);
                            }
                        });
                    }

                    function delInd(id) {
                        if (confirm("Menghapus Indikator akan menghapus SEMUA SUB-INDIKATOR dan DATA yang terkait. Yakin ingin menghapus?")) {
                            $.ajax({
                                type: "POST",
                                url: "<?php echo site_url("usercp/deleteIndicator"); ?>/" + id,
                                async: false,
                                data: {},
                                beforeSend: function(xhr) {
                                },
                                success: function(result, status, xhr) {
                                    var status = $.parseJSON(result);
                                    if (status > 0) {
                                        $("li.ind-i" + id).remove();
                                    }
                                },
                                error: function(xhr, status, error) {
                                    $("#append-dialog button").prop("disabled", false);
                                }
                            });
                        }
                    }

                    function appendHTML(resObj) {
                        $(".ind-i" + resObj.parent_id).each(function() {
                            var ul = $(this).children("ul.childs");
                            if ($(ul).find("li.ind-i" + resObj.id).length) {
                                // ..
                            } else {
                                $(ul).append("<li class='" + "ind-i" + resObj.id + "'>");
                                var html = "";
                                html += "<span class='name'>";
                                html += "[" + resObj.id + "] " + resObj.name;
                                html += "</span>";
                                html += "<span class='aksi'>";
                                html += " ( ";
                                html += "<span class='a-append'>";
                                html += '<a href="javascript:void(0);" onClick="javascript:showAppendDialog(' + resObj.id + ');">append</a>';
                                html += " | ";
                                html += "</span>";
                                html += "<span class='a-detail'>";
                                html += '<a href="javascript:void(0);" onClick="javascript:showDetailDialog(' + resObj.id + ');">edit</a>';
                                html += "</span>";
                                html += "<span class='a-expand hidden'>";
                                html += " | ";
                                html += '<a href="javascript:void(0);" onClick="javascript:expandInd(' + resObj.id + ');">expand</a>';
                                html += "</span>";
                                html += "<span class='a-del'>";
                                html += " | ";
                                html += '<a href="javascript:void(0);" onClick="javascript:delInd(' + resObj.id + ');">delete</a>';
                                html += "</span>";
                                html += " ) ";
                                html += "</span>";
                                html += "<ul class='childs hidden'></ul>";
                                $(ul).children("li.ind-i" + resObj.id).html(html);
                                if (resObj.has_child) {
                                    var spanExpand = $(ul).children("li.ind-i" + resObj.id).find("span.a-expand");
                                    $(spanExpand).removeClass("hidden");
                                }
                                if (resObj.has_value > 0) {
                                    var spanName = $(ul).children("li.ind-i" + resObj.id).children("span.name");
                                    $(spanName).css("font-weight", "bold");
                                }
                            }
                            if (true) {//$(ul).parent().children(".a-expand").hasClass("hidden")) {
                                $(ul).removeClass("hidden");
                            }
                        });
                    }
</script>